<template>
    <div class="demo-card-square mdl-card mdl-shadow--2dp animate__animated animate__fadeIn">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">{{ this.commodity.name }}</h2>
        </div>
        <div class="mdl-card__supporting-text">
            定价:{{ this.commodity.price }} CNY <br>
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="editButtonOnclick">
                修改
            </a>
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="delComm">
                下架
            </a>
        </div>
    </div>
</template>

<script>
import 'animate.css';
export default {
    setup() {
        return {}
    },
    props: [
        "commodity",
        "buyOnclick"
    ],
    methods: {
        delComm() {
            this.$axios({
                method: "post",
                url: "/merchant/delComm",
                dataType: "json",
                data: {
                    "id": this.commodity.id,
                    "name": this.commodity.name,
                    "price": this.commodity.price,
                    "merchant": this.commodity.merchant
                }
            }).then((res) => {
                if (res.data.code == "0") {
                    this.$parent.msg("已下架")
                    this.$parent.getMyComm()
                    this.backToMainMenu()
                } else {
                    this.$parent.msg(res.data.msg)
                    if (res.data.code == "005") {
                        window.location.href = "/#/login"
                        window.location.reload()
                    }
                }
            })
        },
        editButtonOnclick() {
            this.$parent.$refs.edit.setInfo(this.commodity, () => { this.$parent.switchToEdit() })
        }
    }
}
</script>

<style lang="scss" scoped>
.demo-card-square.mdl-card {
    width: 240px;
    height: 320px;
}

.demo-card-square>.mdl-card__title {
    color: #fff;
    background:
        url('../assets/img/shop.jpg') bottom right 50% no-repeat #46B6AC;
    background-size: 480px;
}
</style>